<template>
	<view style="display: flex;justify-content: flex-end;" class="radio-box">
		<view class="" v-for="item in list"  @click="change(item)" >
			{{item.name}}
			<view class="select-box" :class="{'select-box-active':selectValue===item.value}">
				<u-icon name="checkbox-mark" color="#ffffff"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default:[]
			},
			name:{
				type:String,
				default:''
			},
			value:{
				type:[String, Number],
			},
			//是否允许取消
			allowCancel:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				selectValue:''
			}
		},
		watch:{
			value(){
				this.selectValue=this.value
			}
		},
		mounted(){
			console.log('???',this.value)
		   
		},
		methods: {
			change(item){
				let value = item.value
				if(this.selectValue===item.value){
					if(this.allowCancel){
						value=''
					}else{
						return;
					}	 
				}
				
				this.selectValue=value
				this.$emit('change',this.name,item.value)
			}
		}
	}
</script>

<style lang="scss">
	.radio-box {
		>view {
			display: flex;
			align-items: center;
		}

		>view:nth-child(1) {
			margin-right: 56rpx;
		}
	}

	.select-box {
		width: 40rpx;
		height: 40rpx;
		border-radius: 14rpx;
		background-color: #DCDCDC;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.select-box-active {
		background-color: $theme-color;
	}
</style>
